<!--
 * @Author: Langxiaobai 1107014953@qq.com
 * @Date: 2023-07-26 17:48:05
 * @LastEditors: Langxiaobai 1107014953@qq.com
 * @LastEditTime: 2023-07-26 17:48:34
 * @FilePath: \qqy-weapp\src\pages-mine\share-list.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="collect">
    <div class="sticky left-0 right-0 top-0 z-9 h-full bg-hex-ffffff">
      <div class="sticky left-0 right-0 top-0 z-9 h-full bg-hex-ffffff">
        <div class="relative">
          <image class="pointer-events-none absolute left-0 right-0 top-0 w-full"
                 :src="`${cdnUrl}/imgs/detail/bg.png${imgVersion}`" mode="aspectFill" />
          <div class="z-999 flex items-center px-20rpx" :style="{ paddingTop: `${searchBarTop}px` }" @click.stop="goback">
            <uni-icons type="back" size="28" />
            <span class="text-36rpx font-600">分享</span>
          </div>
        </div>
        <div class="mt-36rpx flex items-center justify-center">
          <div class="h-64rpx w-392rpx flex items-center justify-between rounded-60rpx bg-hex-ABCD03 px-4rpx text-28rpx text-hex-fff">
            <div v-for="item in toptablist" :key="item.id" class="h-56rpx w-192rpx rounded-56rpx text-center leading-56rpx"
                 :class="{ 'text-hex-ABCD03 bg-hex-fff': tabIndex === item.id }" @click="changeIndex(item.id)">{{ item.text }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="p-32rpx">
      <div class="mt-44rpx">
        <s-waterfall :datalist="collectShop" :column="2">
          <template #default="{ item }">
            <div class="mb-24rpx box-border rounded-32rpx pr-32rpx">
              <div class="bg-water w-326rpx flex items-center justify-center rounded-xl bg-hex-FAF9F8 py-40rpx">
                <image
                  class="will-change h-190rpx w-130rpx rounded-24rpx"
                  lazy-load
                  :src="item.imgUrl" mode="widthFix" />
              </div>
              <sapn class="multiLine-hiddle mx-10rpx mt-10rpx inline-block" :class="[tabIndex===0?'text-28rpx font-500':'text-24rpx']">{{ item.describe }}</sapn>
              <sapn v-if="tabIndex!==0&&item.isNew" class="mb-10rpx mb-26rpx inline-block bg-hex-FFF2E3 px-4rpx py-2rpx text-20rpx text-hex-E89C43">上新</sapn>
              <div v-if="tabIndex!==0">
                <sapn class="mr-10rpx text-30rpx font-600 text-hex-ff4d4e">¥{{ item.currentPrice }}</sapn>
                <sapn class="text-24rpx text-hex-999999 line-through">¥{{ item.originalPrice }}</sapn>
              </div>
              <div class="mb-32rpx mt-16rpx flex items-center justify-between">
                <div v-if="tabIndex!==0" class="mr-32rpx text-24rpx text-hex-999999 line-through">已售{{ item.sold??0 }}</div>
                <div v-else class="flex items-center">
                  <image class="mr-24rpx h-44rpx w-44rpx" :src="item.authorImage" mode="scaleToFill" />
                  <span class="text-24rpx text-hex-7C8699">{{ item.author }}</span>
                </div>
                <image
                  :src="`${cdnUrl}/svgicons/search/del.svg${imgVersion}`"
                  class="mt--20rpx h-34rpx w-36rpx"
                  mode="scaleToFill"
                />
              </div>
            </div>
          </template>
        </s-waterfall>
      </div>
    </div>
  </div>
</template>

<script lang='ts' setup>
let topHight = $ref(0)
const goback = () => {
  uni.navigateBack({
    delta: 1,
  })
}
let tabIndex: any = $ref(0)
const changeIndex = (index) => {
  tabIndex = index
}
const toptablist = [{ id: 0, text: '广场' }, { id: 1, text: '茶饮' }, { id: 2, text: '商城' }]
let collectShop: any = $ref([
  { imgUrl: `${cdnUrl}/imgs/square/test1.png${imgVersion}`, describe: '进口零食大礼包膨化食品进口零食大礼包膨化食品进口零食大礼包膨化食品进口零食大礼包膨化食品', isNew: true, currentPrice: 23.9, originalPrice: 39.9, sold: 100, authorImage: `${cdnUrl}/imgs/detail/avatar.png${imgVersion}`, author: '作者' },
  { imgUrl: `${cdnUrl}/imgs/square/test2.png${imgVersion}`, describe: '进口零食大礼包膨化食品进口零食大礼包膨化食品进口零食大礼包膨化食品进口零食大礼包膨化食品', isNew: true, currentPrice: 23.9, originalPrice: 39.9, sold: 100, authorImage: `${cdnUrl}/imgs/detail/avatar.png${imgVersion}`, author: '作者' },
  { imgUrl: `${cdnUrl}/imgs/square/test2.png${imgVersion}`, describe: '进口零食大礼包膨化食品进口零食大礼包膨化食品进口零食大礼包膨化食品进口零食大礼包膨化食品', isNew: true, currentPrice: 23.9, originalPrice: 39.9, sold: 100, authorImage: `${cdnUrl}/imgs/detail/avatar.png${imgVersion}`, author: '作者' },
  { imgUrl: `${cdnUrl}/imgs/square/test2.png${imgVersion}`, describe: '进口零食大礼包膨化食品进口零食大礼包膨化食品进口零食大礼包膨化食品进口零食大礼包膨化食品', isNew: true, currentPrice: 23.9, originalPrice: 39.9, sold: 100, authorImage: `${cdnUrl}/imgs/detail/avatar.png${imgVersion}`, author: '作者' },
])
let searchBarTop: any = $ref('24')
let rightBar: any = $ref(0)
onLoad(() => {
  // #ifndef H5
  let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
  searchBarTop = menuButtonInfo.top
  rightBar = menuButtonInfo.width

  // #endif
})
</script>

<style lang='scss'>
.collect{
  .multiLine-hiddle{
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 显示两行文本 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
</style>
